<template>
  <div class="test-file-preview">
    <el-button-group>
      <el-button
          size="small" v-for="(item,i) of fileList" :key="i" :type="type===item.type?'primary':''"
          @click="onChangeType(item)"
      >
        {{ item.type }}
      </el-button>
    </el-button-group>
    <el-dialog :visible.sync="show" title="文件预览" append-to-body width="800px">
      <div style="height: 600px">
        <FilePreview :type="type" :url="fileUrl" :content="fileContent" ref="filePreview"></FilePreview>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import FilePreview from "@/components/filePreview/index.vue";
const defaultText = '那城墙是早已颓圮了的。说是城墙，其实也只剩下一道土垄，乱蓬蓬地长着些狗尾草与枸杞，在夕阳里拖着长长的、荒凉的影子。我走上去，脚下是松软的土，带着去岁衰草的涩味。风是从旷野上直扑过来的，没有遮拦，便显得格外硬，刮在脸上，有种粗粝的疼。这风里，你嗅不出半点如今城里那温吞吞的、带着脂粉气的暖意；它是干的，冷的，带着泥土和千百年时间锈蚀过的味道。\n' +
    '\n' +
    '我站定了，用手去摸那夯土的断壁。土是黄的，被岁月磨得起了粉，指尖稍一用力，便簌簌地落下来，像怎么也握不住的光阴。我忽然想，千百年前，站在这墙头上的戍卒，看到的该是怎样一番光景呢？定然没有如今远处那些火柴盒似的楼房。那时的天，想必更辽远；那时的风，想必更凄紧。他或许也如我一般，将手按在这冰冷的土墙上，只是他望着的，是城外的胡尘与狼烟，心里惦着的，是故乡一碗淡薄的米酒。那该是一种何等沉重的、压在胸口上的寂寞。\n' +
    '\n' +
    '眼前的这一切，这风，这土，这无边无际的旷野，都曾是那寂寞的见证。而今，金戈铁马都作了土，轰轰烈烈的厮杀与坚守，也只剩下这一道供人凭吊的土垄。热闹是它们的，我什么也没有。不，我有的，只是这同一阵吹过古人与今人的风，它毫不留情地穿过我的身体，告诉我，所谓兴衰，所谓悲欢，在它眼里，大抵都只是些微的尘埃罢了。\n' +
    '\n' +
    '夕阳沉得更低了，天地间弥漫起一种苍莽的紫金色。远处的城市，已亮起了星星点点的灯，那光是温柔的，却也是隔膜的，像另一个无关的世界。我转身走下土垄，将那一片庞大的、沉默的寂静，连同整个沉甸甸的黄昏，都留在了身后。风还在吹着，只是那呜咽声，听来愈发像一声悠长的、若有若无的叹息了。'
export default {
  components: {FilePreview},
  data() {
    return {
      show: false,
      type: '',
      fileUrl: '',
      fileContent: '',
      fileList: [
        {type: 'txt', url: '', content: defaultText},
        {type: 'img', url: 'https://windata.platomix.net/img/pic-jiashicang.8daf8894.png'},
        {type: 'audio', url: 'https://windata.platomix.net/static/test.mp3'},
        {type: 'video', url: 'https://windata.platomix.net/static/test.mp4'},
        {type: 'word', url: 'https://windata.platomix.net/static/test.docx'},
        {type: 'excel', url: 'https://windata.platomix.net/static/test.xlsx'},
        {type: 'ppt', url: 'https://windata.platomix.net/static/test.pptx'},
        {type: 'pdf', url: 'https://windata.platomix.net/static/test.pdf'},
        {type: 'csv', url: 'https://windata.platomix.net/static/test.csv'},
        {type: 'md', url: 'https://windata.platomix.net/static/test.md'},
      ]
    };
  },
  watch:{
    show(val) {
      if (!val) {
        this.$refs.filePreview.stop()
      }
    }
  },
  created() {
  },
  methods: {
    onChangeType(item) {
      this.type = item.type
      this.fileUrl = item.url;
      if (item.type === 'txt') this.fileContent = item.content;
      this.show = true;
    },
  },
}
</script>
<style lang="scss">
.test-file-preview {

}
</style>